<template>
	<div style="height: 100vh;z-index: 1;position: relative">
		<div class="restaurant-head">
			<div @click="gotoback" style="background-color:#b79c4c;font-size: 14px;padding-top: 5px;padding-left: 5px">返回</div>
			<div class="img">
				<img src="../../assets/img/home/shop/business1.png" alt="">
			</div>
			<div class="restaurant-info">
				<div style="font-size: 24px;font-weight: bolder;margin-top: 5vh">积三居牛肉饭(钻石湾店)</div>
				<div class="info-message">
					<span>评价</span>
					<span>月售431单</span>
					<span>蓝骑士专送约30分钟</span>
				</div>
				<div>
					<div>
						<span>8¥无门槛</span>
						<span>领取</span>
					</div>
				</div>
				<div>
					<div class="info-cheap">
						<span>20减13</span>
						<span>40减18</span>
						<span>60减23</span>
						<span>100减38</span>
					</div>
				</div>
				<div class="info-tongzhi">
					公告：欢迎光临，用餐高峰期请提前下单，谢谢。
				</div>
			</div>
		</div>
		<div class="restaurant-tab">
			<div>点餐</div>
			<div>评价</div>
			<div>商家</div>
		</div>
		<div class="order">
			<div class="order-head">
				<div v-for="item in food2.menu">
					<a >{{item.name}}</a>
				</div>
			</div>
			<div class="order-body">
				<div v-for="(item1,index1) in food2.menu"  style="">
					<span :id="item1.id">{{item1.name}}</span>
					<div class="order-info" v-for="(item2,index2) in item1.foods">
						<img src="../../assets/img/restaurant/tupian.png" alt="">
						<div class="food-info">
							<span style="font-size: 14px;font-weight: bolder">{{item2.name}}</span>
							<span style="font-size: 10px;color: #999999">{{item2.description}}</span>
							<span style="font-size: 10px;color: #999999">月售{{item2.month_sales_text==""?0:item2.month_sales_text}}份 好评{{item2.satisfy_rate}}%</span>
							<span style="font-size: 8px;border: 0.1px solid #eb6551;width: 20px;color: #eb6551">{{item2.discount_rate}}折</span>
							<div class="food-operation">
								<div @click="calculatePrice">¥{{item2.lowest_price}}</div>
								<div style="display: flex;justify-content: space-between;">
									<button @click="decrement(index1,index2)" :disabled="item2.type<=0" style="text-align: center;width: 25px;height: 25px;line-height: 20px; color:#FFFFFF;border-radius: 25px;border: 0.1px solid #20c3fe;background-color:#20c3fe;">-</button>
									<span>{{item2.type}}</span>
									<button @click="increment(index1,index2)" style="text-align: center;width: 25px;height: 25px;line-height: 20px; color:#FFFFFF;border-radius: 25px;background-color:#20c3fe;border: 0.1px solid #20c3fe" >+</button>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
		<div  class="sum">
			<div style="color: #FFFFFF;font-size: 18px"  @click="removeHandle()">清空</div>
			<div style="font-weight: bold;width: 50vw">总价格:¥ {{totalPrice.toFixed(2)}}</div>
			<div @click="myshopping" style="background-color:#38ca73; color: #FFFFFF;font-size: 20px;height: 100%">去结算</div>
		</div>
	</div>
</template>

<script>
	import food2 from '../../data/json/shop2.json'
	import {mapGetters,mapMutations,mapActions} from 'vuex'
	export default {
		data() {
			return {
				isActive:true,
				food2,
			}
		},
		computed:{
			totalPrice(){
				let totalPrice=0
				for(let menu of this.food2.menu){
					for(let foods of menu.foods){
						totalPrice+=foods.lowest_price*foods.type
					}
				}
				return totalPrice
			},
			...mapGetters['items']
		},
		methods: {
			gotoback(){
				this.$router.push({path:'/home'})
			},
			calculatePrice(){

			},
			increment(index1,index2){
				this.food2.menu[index1].foods[index2].type++
                let name=this.food2.menu[index1].foods[index2].name
                let price=this.food2.menu[index1].foods[index2].lowest_price
				let description=this.food2.menu[index1].foods[index2].description
				this.addProductToCart({name,price,description})
			},
			decrement(index1,index2){
				let name=this.food2.menu[index1].foods[index2].name
				this.food2.menu[index1].foods[index2].type--
				this.decrementItemQuantity({name})
			},
			removeHandle(){
				for(let menu of this.food2.menu){
					for(let foods of menu.foods){
						foods.type=0
					}
				}
				this.removeItemAll()
			},
			myshopping(){
				this.$router.push({path:'/shopping'})
			},
			...mapMutations({
				decrementItemQuantity:'DECREMENT_ITEM_QUANTITY'
				// pushProductToCart:'PUSH_PRODUCT_TO_CART'
			}),
			...mapActions([
				'addProductToCart','removeItemAll'
			])
		}
	}
</script>

<style scoped>
	.restaurant-head{
		height: 45vh;
	}
	.restaurant-head .img{
		height: 15vh;
		text-align: center;
		background-color: #b79c4c;
	}
	.img>img{
		width: 12vh;
		height: 12vh;
		margin-top: 5vh;
	}
	.red{
		background-color: #00FF00;
	}
	.restaurant-info{
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-around;
		align-items: center;
		height: 25vh;
	}
	.info-message span{
		font-size: 14px;
	}
	.info-message span:after{
		content: '      ';
	}
	.info-cheap span{
		border: 0.5px solid  red;
		margin-left: 5px;
		font-size: 10px;
	}
	.info-tongzhi{
		color: #666666;
		font-size: 14px;
	}
	.restaurant-tab{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
		align-items: center;
		font-size: 16px;
		padding-bottom: 1vh;
		border-bottom: 1px solid #e2e2e2;
	}
	.order{
		height: 87vh;
		display: flex;
	}
	.order-head{
		width: 24vw;
		background-color: #F5F5F5;
		color: #aaaaaa;

		display: flex;
		flex-flow: column nowrap;
		justify-content: space-around;
	}
	.order-body{
		width: 76vw;
		height: 100%;
		background-color: #fff;

		white-space: nowrap;
		overflow-y: auto;
	}

	.order-info{
		display: flex;
		flex-direction: row;
		padding: 1vh 0 1vh 1vh;
	}
	.order-info>img{
		width: 22vw;
		height: 22vw;
		margin-right: 2vw;
	}
	.food-info{
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-around;
		align-items: flex-start;
	}
	.food-info>span{
		width: 45vw;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.food-operation{
		display: flex;
		justify-content: space-between;
		width: 45vw;

		color: #ff5339;
	}

	.sum{
		background-color:#aaaaaa;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.sum>div{
		width: 25vw;
		height: 100%;
		text-align: center;
		line-height: 8vh;
	}
</style>
